interface ItemType {
    id: string,
    img: string,
    title: string
}

interface DataType {
    code: number,
    data: ItemType[]
}

// 获取数据
Ajax('/api/getList', (data: DataType) => {
    renderBox(data.data)
})

// 渲染数据
function renderBox(data: ItemType[]) {
    // 获取渲染位置
    const boxDom: Element | null = document.querySelector('.box');

    (boxDom as Element).innerHTML = data.map(item => {
        return `<div class="item" id="${item.id}">
                    <img src="${item.img}" alt="">
                    <div>
                        <h2>${item.title}</h2>
                    </div>
                </div>
        `
    }).join('')

    bindEvent()
}

// 点击跳转
function bindEvent() {
    // 获取所有列表
    const ItemDom = Array.from(document.querySelectorAll('.item'))

    ItemDom.forEach(item => {
        item.addEventListener('click', () => {
            // 先在服务中配置路由
            location.href = `/detail?id=${item.id}&title=123&a=1`
        })
    })
}